<template>
  <div class="order-status-nav">
    <div @click="handleStatus(item.status, key)" v-for="(item, key) in orderStatusNav" :key="item.status" class="order-status-item" :class="{ active: activeIndex === key }">
        <span class="title">{{ item.title }}</span>
        <div v-if="item.badge" class="badge">{{ item.badge }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'OrderStatusNav',
  props: {
    orderStatusNav: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      activeIndex: 0
    }
  },
  methods: {
    handleStatus (status, key) {
      this.activeIndex = key
      this.$emit('click', status)
    }
  }
}
</script>

<style lang="less" scoped>
.order-status-nav {
    display: flex;

    .order-status-item {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        flex: 1;
        font-size: 14px;
        color: #333;
        border: 1px solid #e5e4e4;
        min-width: 120px;
        padding: 6px 0;
        cursor: pointer;
        background-color: #fff;

        &.active {
            background-color: #ffc100;
            border: 0;
        }

        .badge {
            position: absolute;
            right: 26px;
            top: 3px;
            width: 16px;
            height: 16px;
            border-radius: 100vh;
            background-color: #fd3333;
            color: #fff;
            font-size: 10px;
            text-align: center;
            line-height: 16px;
        }
    }
}
</style>
